<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
    <title>七颗牙学堂线上收银台</title>
    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/vue.js"></script>
    <!-- <script src="./ceshi/js/vue-router.js"></script> -->
</head>
<style>
    html,
    body {
        margin: 0;
        padding: 0;
    }

    #box {
        margin: 0;
        padding: 0;
        background-color: #eee;
        width: 100vw;
        height: 100vh;
    }

    .item {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        border-bottom: 1px solid #eee;
    }

    .item span:nth-child(1) {
        font-size: 14px;
        color: #aaa;
    }

    .item span:nth-child(2) {
        font-size: 14px;
        color: #888;
    }

    button {
        width: 80vw;
        height: 40px;
        display: block;
        margin: 30px auto;
        background-color: #409EFF;
        color: #fff;
        border-radius: 5px;
        border: 0;
    }

    #class {
        font-size: 12px;
        color: #444;
    }

    .div,.div1,.divshade {
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        display: none;
    }

    .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 170px;
        width: 260px;
        background-color: #fff;
        border-radius: 20px;
        text-align: center;

    }
    .divshade .content{
        width: 360px;
        height: auto;
        top: 30%;
        padding-bottom: 20px;
    }
    .div1 .content{
        height: 150px;
    }

    .top {
        font-size: 16px;
        font-weight: bold;
        padding: 20px 0 15px;
    }

    .center {
        padding: 0 20px 15px;
        text-align: left;
        font-size: 14px;
        border-bottom: 2px solid #eee;
    }

    .bottom {
        margin-top: 10px;
    }
    .itempay{
        width: 340px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px auto 0px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }
    .itempaynone{
        border-bottom: none;
    }
    .itemleft{
        font-size: 16px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .itemleft img{
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }
    .itemright img{
        width: 15px;
        height: 15px;
    }
    .itembut{
        width: 260px;
        background-color: #409EFF;
        border-radius: 4px;
        height: 36px;
        line-height: 36px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        margin: 20px auto 0;
    }
    .closeno{
        color: #666;
        font-size: 12px;
        text-align: center;
        margin-top: 6px;
    }
    .everyhb{
        width: 340px;
        margin:0px auto 0;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-content: center;
        display: none;
        overflow: hidden;
    }
    .hbitem{
        float: left;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 110px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #EDEDED;
        text-align: center;
        height: 60px;
        margin-right: 2px;
    }
    .hbitem:last-child{
        margin-right: 0;
    }
    .hbitemactive{
        width: 110px;
        height: 60px;
        border: 0rpx solid #EDEDED;
        background: url('./assets/img/zfchoose.png') no-repeat 100%;
        background-size: 100% 100%;
        border:none;
    }
    .hbitemdec{
        width: 110px;
        color: #666666;
        font-size: 12px;
        padding-top: 12px;
    }
    .hbitemdec1{
        width: 110px;
        color: #949494;
        font-size: 12px;
        padding-top: 5px;
    }
	.hbitemactive .hbitemdec{
		color: #1677FF;
	}
	.hbitemactive .hbitemdec1{
		color: #7DB3FF;
	}
</style>

<body>
    <div id="box">
        <div class="item"><span>客户姓名</span><span id="name"></span></div>
        <div class="item"><span>客户电话</span><span id="tel"></span></div>
        <div class="item"><span>所报课程</span><span id="class"></span></div>
        <div class="item"><span>本次缴费</span><span id="amount"></span></div>
        <button id="save">确认支付</button>
        <div class="div">
            <div class="content">
                <div class="top"></div>
                <div class="center">您的订单已支付或订单已过期，请向工作人员领取新的付款码</div>
                <div class="bottom">我知道了</div>
            </div>
        </div>
        <div class="div1">
            <div class="content">
                <div class="top">请先登录</div>
                <div class="center" style=" text-align: center;">登录以后才可以进行支付</div>
                <div class="bottom bottom1">去登录</div>
            </div>
        </div>
        <!-- 选择支付宝支付或者花呗分期 -->
        <div class="divshade">
            <div class="content">
                <div class="top">支付方式</div>
                <div class="itempay" id="payzf">
                    <div class="itemleft">
                        <img src="./assets/img/zhifubao.png" />
                        支付宝
                    </div>
                    <div class="itemright itemrightzfb">
                        <!-- <img src="./assets/img/choose.png" /> -->
                        <img src="./assets/img/chooseactive.png" />
                    </div>
                </div>
                <div class="itempay itempaynone" id="payzfhb">
                    <div class="itemleft">
                        <img src="./assets/img/zfpay.png" />
                        花呗分期
                    </div>
                    <div class="itemright">
                        <img src="./assets/img/choose.png" />
                    </div>
                </div>
                <div class="everyhb">
                    <div class="hbitem">
                        <div class="hbitemdec"></div>
                        <div class="hbitemdec1"></div>
                    </div>
                </div>
                <div class="itembut" id="paysure">确认支付</div>
                <p class="closeno">取消支付</p>
            </div>
        </div>
    </div>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</body>

<script type="text/javascript">
    var urls = 'https://n.qikeya.com/saas/public/index.php/'

    // var urls = 'https://appapi.qikeya.cn/'

    var phnum = 0,hblist=[]; //花呗分期

    function getData() {
        let data = {
            orderid: '',
            type: ''
        }
        let orderid = localStorage.getItem('orderid')
        let type = localStorage.getItem('type')
        let aa = decodeURI(location.href)
        // console.log(aa);
        let str = aa.split('?')[1].indexOf('openid')
        // console.log(str);
        if (orderid && type && str != -1) {
            let str = aa.split('openid')[1].split(':')[1].split('}')[0]
            // console.log(str);
            let openid = str.replace("\"", "").replace("\"", "");
            // console.log(openid);
            localStorage.setItem('openid', openid)
            // $("#save").click(test());
            data = {
                orderid: orderid,
                type: type
            }
            return data
        } else {
            let str = location.href.split('?')[1]
            let arr = str.split('&')
            arr.forEach(val => {
                let obj = val.split('=')
                if (obj[0] == 'orderid') {
                    data.orderid = obj[1]
                    localStorage.setItem('orderid', obj[1])

                } else if (obj[0] == 'type') {
                    data.type = obj[1]
                    localStorage.setItem('type', obj[1])
                }
            });
            return data
        }

    }
    function getInfo() {
        
        $.ajax({
            type: 'POST',
            url: urls + 'api/home/cashier',
            data: getData(),
            contentType: 'application/x-www-form-urlencoded',
            headers: {
            },
            success: function (res) {
                if (res.errcode != '1002') {
                    // console.log(res);
                    info = res.data
                    $('#name').text(info.nickname)
                    $('#tel').text(info.tel)
                    $('#class').text(info.good_name)
                    $('#amount').text(info.amount);
                    Hbamount(info.amount);
                } else {
                    $('.div').css('display', 'block')
                    $('.top').text(res.msg)

                }


            }
        })
    }
    // 花呗分期
    function Hbamount(amount){
        var that = this;
        if(Number(amount)>=300){
            $.ajax({
                type: 'POST',
                url: urls + 'api/Alipay/Hbamount',
                data: {amount:amount},
                contentType: 'application/x-www-form-urlencoded',
                headers: {
                },
                success: function (res) {
                    if (Number(res.errcode) == 0) {
                        var data = res.data;
                        hblist = data;
                        // phnum = data[0].num;
                    }
                }
            })
        }
    }
    function test() {
        let obj = getData()
        let obj1 = {}
        if (payEnv == 1) {
            let openid = localStorage.getItem('openid')
            if (openid) {
                obj1 = {
                    orderid: obj.orderid,
                    type: obj.type,
                    payment: 1,
                    openid: openid//openid
                }

                $.ajax({
                    type: 'POST',
                    url: urls + 'api/home/cashierPay',
                    data: obj1,
                    contentType: 'application/x-www-form-urlencoded',
                    headers: {
                    },
                    success: function (res) {
                        localStorage.setItem('appId', res.data.appId)
                        localStorage.setItem('nonceStr', res.data.nonceStr)
                        localStorage.setItem('package', res.data.package)
                        localStorage.setItem('paySign', res.data.paySign)
                        localStorage.setItem('signType', res.data.signType)
                        localStorage.setItem('timeStamp', res.data.timeStamp)
                        window.wx.config({
                            debug: false, // true是开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: res.data.appId, // 必填，公众号的唯一标识
                            timestamp: res.data.timeStamp, // 必填，签名的时间戳，后台生成的
                            nonceStr: res.data.nonceStr, // 必填，签名的随机串，后台生成的
                            // signature: data.signature, // 必填，签名，后台生成的
                            jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，scanQRCode是调用扫一扫二维码
                        });
                        window.wx.error(function (res) {
                            console.log(res);
                            //   localStorage.removeItem('expireSignTime');
                            //   Toast.fail('网络故障，请退出重新页面');
                        });
                        let appId = localStorage.getItem('appId')
                        let nonceStr = localStorage.getItem('nonceStr')
                        let package = localStorage.getItem('package')
                        let paySign = localStorage.getItem('paySign')
                        let signType = localStorage.getItem('signType')
                        let timeStamp = localStorage.getItem('timeStamp')
                        window.wx.ready(() => {
                            wx.chooseWXPay({
                                timestamp: timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                                nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
                                package: package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                                signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                paySign: paySign, // 支付签名
                                success: function (res) {
                                    // 支付成功后的回调函数
                                }
                            });
                        })
                    }, complete: function (res) {

                    }
                })
            } else {
                getOpenId()
            }
        } else {
            if(Number(info.amount)>=300){
                $('.divshade').fadeIn();
            }else{
                payzf();
            }
            // obj1 = {
            //     orderid: obj.orderid,
            //     type: obj.type,
            //     payment: payEnv,
            //     fq: 0,
            // }
            // var href = urls + 'api/home/cashierPay?orderid=' + obj.orderid + '&type=' + obj.type + '&payment=' + payEnv + '&fq=0' + '&route=kongbai';
            // window.location.href = href

        }
    }
    function getenv() {
        // 判断微信还是支付宝
        if (/MicroMessenger/.test(window.navigator.userAgent)) {
            payEnv = '1';
            let id = localStorage.getItem('openid')
            if (id) {
            } else {
                // getOpenId()
                $('.div1').css('display', 'block')
            }

        } else if (/AlipayClient/.test(window.navigator.userAgent)) {
            payEnv = '5';
        } else {
            payEnv = '5';
        }
    }
    function getOpenId() {
        $.ajax({
            type: 'POST',
            url: urls + 'api/user/wechatConfig',
            data: {},
            contentType: 'application/x-www-form-urlencoded',
            headers: {
            },
            success: function (res) {
                // console.log(res);
                var appid = '171pk17641pkzone1';
                var appidincode = encodeURIComponent(appid);
                window.location.href = urls + 'api/user/getOpenid?to=https&is_act=2' + '&route=nowpage&appid=' + appidincode;
                window.location.href = href;

            }
        })

    }
    $(function () {
        let openid = ""
        let payEnv = ''
        let info = {}
        getInfo()
        getenv()
    })
    $('.bottom1').click(function () {
        getOpenId()
        // console.log('点击');
        // $('.div').css('display','none')
        // window.close()
    })
    $('#payzf').click(function(){
        phnum = 0;
        $('.everyhb').hide();
        $('.itemrightzfb img').attr('src','./assets/img/chooseactive.png');
        $('.itempaynone .itemright img').attr('src','./assets/img/choose.png');
    })
    $('#payzfhb').click(function(){
        phnum = hblist[0].num;
        $('.everyhb').show().html('');
        var innerhtml = '';
        for(var i=0;i<hblist.length;i++){
            innerhtml = innerhtml + '<div class="hbitem"><div class="hbitemdec">分'+hblist[i].num+'期('+hblist[i].rate+'手续费)</div><div class="hbitemdec1">￥'+hblist[i].amount+'/期</div></div>'
        }
        $('.everyhb').html(innerhtml);
        $('.everyhb .hbitem').eq(0).addClass(' hbitemactive');
        $('.itemrightzfb img').attr('src','./assets/img/choose.png');
        $('.itempaynone .itemright img').attr('src','./assets/img/chooseactive.png');
        $('.hbitem').click(function(){
            var index = $(this).index();
            phnum = hblist[index].num;
            $('.hbitem').removeClass(' hbitemactive');
            $(this).addClass(' hbitemactive');
        })
    })
    $('#paysure').click(function(){
        payzf();
    })
    function payzf(){
        let obj = getData();
        var obj1 = {
            orderid: obj.orderid,
            type: obj.type,
            payment: payEnv,
            fq: phnum,
        }
        var href = urls + 'api/home/cashierPay?orderid=' + obj.orderid + '&type=' + obj.type + '&payment=' + payEnv + '&fq='+phnum+'' + '&route=kongbai';
        // console.log(href);
        // return;
        window.location.href = href
    }
    $('.closeno').click(function(){
        $('.divshade').fadeOut();
    })
    $("#save").click(function () {
        let obj = getData()
        // console.log(obj);
        let obj1 = {}
        if (payEnv == 1) {
            let openid = localStorage.getItem('openid')
            if(openid) {
                obj1 = {
                    orderid: obj.orderid,
                    type: obj.type,
                    payment: 1,
                    openid: openid//openid
                }

                $.ajax({
                    type: 'POST',
                    url: urls + 'api/home/cashierPay',
                    data: obj1,
                    contentType: 'application/x-www-form-urlencoded',
                    headers: {
                    },
                    success: function (res) {
                        localStorage.setItem('appId', res.data.appId)
                        localStorage.setItem('nonceStr', res.data.nonceStr)
                        localStorage.setItem('package', res.data.package)
                        localStorage.setItem('paySign', res.data.paySign)
                        localStorage.setItem('signType', res.data.signType)
                        localStorage.setItem('timeStamp', res.data.timeStamp)
                        window.wx.config({
                            debug: false, // true是开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: res.data.appId, // 必填，公众号的唯一标识
                            timestamp: res.data.timeStamp, // 必填，签名的时间戳，后台生成的
                            nonceStr: res.data.nonceStr, // 必填，签名的随机串，后台生成的
                            // signature: data.signature, // 必填，签名，后台生成的
                            jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，scanQRCode是调用扫一扫二维码
                        });
                        window.wx.error(function (res) {
                            console.log(res);
                            //   localStorage.removeItem('expireSignTime');
                            //   Toast.fail('网络故障，请退出重新页面');
                        });
                        let appId = localStorage.getItem('appId')
                        let nonceStr = localStorage.getItem('nonceStr')
                        let package = localStorage.getItem('package')
                        let paySign = localStorage.getItem('paySign')
                        let signType = localStorage.getItem('signType')
                        let timeStamp = localStorage.getItem('timeStamp')
                        window.wx.ready(() => {
                            wx.chooseWXPay({
                                timestamp: timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                                nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
                                package: package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                                signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                paySign: paySign, // 支付签名
                                success: function (res) {
                                    // 支付成功后的回调函数
                                }
                            });
                        })
                    }, complete: function (res) {

                    }
                })
            }
            // else {
            //     getOpenId()
            // }
        } else {
            // console.log(info);
            if(Number(info.amount)>=300){
                $('.divshade').fadeIn();
            }else{
                payzf();
            }
        }

    });
</script>


</html>